<!doctype html>
<head>
	<title>vue组件demo</title>
	<meta http-equiv="Content-Type" content="text/html" ; charset="utf-8">
	<script src="../js/vue.js"></script>
	<style type="text/css">
		* {
			margin: 0;
			/* 全局设置所有元素的外边距为 0 */
			padding: 0;
			/* 全局设置所有元素的内边距为 0 */
		}

		input {
			width: 265px;
			/* 输入框的宽度 */
			height: 28px;
			/* 输入框的高度 */
			border: 1px solid #ccc;
			/* 输入框的边框样式 */
			background-color: transparent;
			/* 输入框的背景透明 */
		}

		input:focus {
			border-color: #66AFE !important;
			/* 输入框获取焦点时的边框颜色 */
			outline: 0;
			/* 去除输入框获取焦点时的默认轮廓 */
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
			/* Webkit 内核浏览器的内阴影样式 */
			-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
			/* Firefox 浏览器的内阴影样式 */
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
			/* 通用的盒阴影样式 */
		}

		/*向下箭头样式*/
		.triangle_border_down {
			border: #ccc solid 1px;
			/* 元素的边框样式 */
			border-radius: 5px;
			/* 边框圆角半径 */
			width: 30px;
			/* 元素的宽度 */
			height: 30px;
			/* 元素的高度 */
			display: inline-block;
			/* 以行内块级元素显示 */
			vertical-align: top;
			/* 垂直对齐方式为顶部对齐 */
			position: relative;
			/* 相对定位 */
			cursor: pointer;
			/* 鼠标指针样式为手型，表示可点击 */

		}

		.triangle_border_down:hover {
			background-color: #ccc;
			/* 鼠标悬停时的背景颜色 */
		}

		.triangle_border_down.down {
			width: 0;
			/* 元素的宽度 */
			height: 0;
			/* 元素的高度 */
			border-width: 10px 10px 0;
			/* 边框宽度 */
			border-style: solid;
			/* 边框样式为实线 */
			border-color: #333 transparent transparent;
			/* 边框颜色 */
			position: absolute;
			/* 绝对定位 */
			top: 12px;
			/* 距离顶部的距离 */
			left: 5px;
			/* 距离左边的距离 */
		}

		.triangle_border_down.up {
			width: 0;
			/* 元素的宽度 */
			height: 0;
			/* 元素的高度 */
			border-width: 0px 10px 10px;
			/* 边框宽度 */
			border-style: solid;
			/* 边框样式为实线 */
			border-color: transparent transparent #333;
			/* 边框颜色 */
			position: absolute;
			/* 绝对定位 */
			top: 8px;
			/* 距离顶部的距离 */
			left: 5px;
			/* 距离左边的距离 */
		}

		.main-work-top {
			width: 400px;
			/* 元素的宽度 */
			padding: 5px;
			/* 内边距 */
			margin-bottom: 10px;
			/* 底部外边距 */
		}

		.main-box {
			width: 255px;
			/* 元素的宽度 */
			border: solid 1px darkgray;
			/* 边框样式 */
			padding: 5px;
			/* 内边距 */
			margin-bottom: 5px;
			/* 底部外边距 */
		}

		.main-box ul {
			list-style: none;
			/* 去除列表的默认标记样式 */
			margin: 0;
			/* 外边距 */
			padding: 0;
			/* 内边距 */
		}

		.main-box li {
			margin-bottom: 5px;
			/* 底部外边距 */
			padding-left: 10px;
			/* 左边内边距 */
		}

		.main-box li:hover {
			background-color: coral;
			/* 鼠标悬停时的背景颜色 */
			color: #fff;
			/* 鼠标悬停时的文字颜色 */
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- 挂载父组件，并传递 "lists" 数据 -->
		<father-component class="center" v-bind:list="lists">
			<p>请选择课程</p>
		</father-component>
	</div>
</body>
<script type="text/javascript">
	var Father = {
		props: ['list'], // 父组件接收名为 "list" 的属性
		// 父组件的数据定义
		data: function() {
			return {
				value: "", // 输入框绑定的值
				isShow: false, // 控制子组件显示与否的标志
				spanDownShow: true, // 控制向下箭头显示与否的标志
				spanUpShow: false // 控制向上箭头显示与否的标志
			}
		},
		// 父组件的模板
		template: ` <div class="main-work-top">
                    <slot>如果父组件没用插入内容,我将作为默认出现</slot>
                    <div>
                        <input type="text" v-model="value" />
                        <div class="triangle_border_down" v-on:click="showPanel">
                            <span class="up" v-show="spanUpShow"></span>
                            <span class="down" v-show="spanDownShow"></span>
                        </div>
                    </div>
                    <child-component v-bind:list="list" v-on:tempFun="fatherFun" v-show="isShow"></child-component>
                </div> `,
		// 注册子组件
		components: {
			'child-component': {
				props: ['list'], // 子组件接收名为 "list" 的属性
				// 子组件的模板
				template: `<div class="main-box">
                            <ul>
                                <li v-for="item in list" v-on:click="childFun(item)" v-bind:value="list.item">{{item}}</li>
                            </ul>
                        </div>`,
				methods: {
					childFun: function(value) {
						// 子组件向父组件触发 "tempFun" 事件
						this.$emit('tempFun', value);
					}
				}
			}
		},
		methods: {
			fatherFun: function(item) {
				// 处理子组件触发的 "tempFun" 事件，更新父组件的值
				this.value = item;
			},
			showPanel: function() {
				// 切换子组件的显示状态和箭头的显示状态
				this.isShow = !this.isShow;
				this.spanDownShow = !this.spanDownShow;
				this.spanUpShow = !this.spanUpShow;
			}
		},
		watch: {
			value: function(newValue, oldValue) {
				// 监视 "value" 的变化来控制显示状态
				if (newValue === "") {
					this.isShow = false;
					this.spanDownShow = true;
					this.spanUpShow = false;
				} else {
					this.isShow = true;
					this.spanDownShow = false;
					this.spanUpShow = true;
				}
			}
		}
	}
	var vm = new Vue({
		el: '#app', // 将 Vue 实例挂载到具有 ID "app" 的元素上
		// 注册父组件
		components: {
			'father-component': Father
		},
		data: {
			lists: ['HTML5', 'node.js', 'JavaScript', 'Vue', ] // 初始化数据 "lists"
		}
	})
</script>
</html>